<!--
 * @Author       : xiaowu wwl093000@163.com
 * @Date         : 2023-05-11 14:24:33
 * @LastEditTime : 2023-06-12 17:11:43
 * @LastEditors  : xiaowu wwl093000@163.com
 * @FilePath     : /erp-admin-ui/src/views/dashboard/BonusPool.vue
 * @Description  : -奖金池
-->
<template>
  <div>
    <div class="bonus-wrapper">
      <p>奖金池</p>
      <div class="bonus-wrapper-content">
        <div class="content-center" v-if="!chartData.ifJoin">
          <div class="content-center-title">
            未参与
            <el-button size="mini">参 与</el-button>
          </div>
          <!-- <div class="content-center-box">
            <div class="content-center-item">
              <div class="item-title">奖金池：</div>
              <div class="item-num"><span class="icon">￥</span><count-to :start-val="0" :end-val="102400" :duration="2600" class="item-num" /></div>
            </div>
            <div class="content-center-item">
              <div class="item-title">开奖时间：</div>
              <div class="item-num">2023-05-20</div>
            </div>
          </div> -->
        </div>
        <div class="content-center" v-else>
          <div class="content-center-title">
            已参与
            <el-button size="mini">退 出</el-button>
          </div>
          <div class="content-center-box">
            <div class="content-center-item">
              <div class="item-title">代理排名：</div>
              <div class="item-num">{{ chartData.ascSort }}</div>
            </div>
            <div class="content-center-item">
              <div class="item-title">贡献销售额：</div>
              <div class="item-num">
                <span class="icon">￥</span>
                {{ chartData.profferMent }}
              </div>
            </div>
            <div class="content-center-item">
              <div class="item-title">总参与代理数量：</div>
              <div class="item-num">{{ chartData.agentJoinNumber }}</div>
            </div>
            <div class="content-center-item">
              <div class="item-title">奖金池：</div>
              <div class="item-num">{{ chartData.agentBounsMent }}</div>
            </div>
            <div class="content-center-item">
              <div class="item-title">开奖时间：</div>
              <div class="item-num">{{ chartData.agentOpenTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
export default {
  components: {
    CountTo
  },
  props: {
    chartData: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="scss" scoped>
.bonus-wrapper {
  background: #fff;
  padding: 20px 16px 0;
  margin-bottom: 32px;

  p {
    font-size: 16px;
    line-height: 18px;
    margin: 0 0 15px;
    color: #666;
  }

  .bonus-wrapper-content {
    padding: 10px 0 40px;
    .content-center {
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      .content-center-title {
        font-size: 16px;
        color: #999999;
        .el-button {
          margin-left: 20px;
        }
      }
      .content-center-box {
        display: flex;
        align-items: center;
        margin-top: 20px;
        .content-center-item {
          padding: 26px;
          background: #fff;
          box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
          border-color: rgba(0, 0, 0, .05);
          display: flex;
          align-items: center;
          margin: 0 12px;
          font-weight: bold;
          .item-title {
            font-size: 16px;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.45);
          }
          .item-num {
            font-size: 20px;
            color: #666666;
            display: flex;
            .icon {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
